<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>京猫商城 用户注册</title>
        <meta name="renderer" content="webkit|ie-comp|ie-stand">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <link rel="stylesheet" th:href="@{/lib/layui/css/layui.css}">
        <link rel="stylesheet" th:href="@{/css/register.css}">

        <style>
            body,html {
                height: 100% !important;
                width: 100%;
            }
        </style>

    </head>
<body class="login-bg">

<div class="login-main">
    <header class="layui-elip" style="width: 95%;color: seashell;font-weight: bolder">注册</header>
    <form class="layui-form">
        <!--输入用户名-->
        <div class="layui-input-inline">
            <div class="layui-inline" style="width: 90%">
                <label for="managerName"></label>
                <input type="text" name="managerName" id="managerName" required lay-verify="required" placeholder="用户名" autocomplete="off" class="layui-input">
            </div>
            <!--判断用户名是否可用的图标 -->
            <div class="layui-inline">
                <i class="layui-icon" hidden id="ri" style="color: green; font-weight: bolder"></i>
                <i class="layui-icon" hidden id="le" style="color: red; font-weight: bolder">ဆ</i>
            </div>
        </div>
        <br>
        <!--输入密码-->
        <div class="layui-input-inline">
            <div class="layui-inline" style="width: 90%">
                <label for="managerPassword"></label>
                <input type="password" name="managerPassword" id="managerPassword" required lay-verify="required" placeholder="密码" autocomplete="off" class="layui-input">
            </div>

        </div>
        <div class="layui-input-inline login-btn" style="width: 70%;margin: auto">
            <button type="submit" lay-submit lay-filter="sub" class="layui-btn" lay->点击注册</button>
        </div>
        <br>
        <br>
        <br>
        <p style="width: 100%">
            <a href="/login_page" class="fl">已有账号？立即登录</a>
            <a href="javascript:" class="fr" style="margin-right: 30px">忘记密码？</a>
        </p>
    </form>
</div>


<script src="lib/layui/layui.js"></script>
<script type="text/javascript">
    layui.use(['form', 'layer', 'jquery'], function () {
        const form = layui.form;
        const $ = layui.jquery;
        //为表单添加blur事件
        $('#managerName').blur(function () {
            const managerName = $('#managerName').val();
            //ajax异步刷新
            $.ajax({
                url:'/checkManagerName',
                type:'post',
                dataType:'JSON',
                data:{managerName:managerName},
                //验证用户名是否可用
                success: function (res) {
                    console.log(res.code);
                    if (res.code === 0){
                        //layer.msg('可以注册')
                        $('#ri').removeAttr('hidden');
                        $('#le').attr('hidden','hidden');
                    } else{
                        //layer.msg('用户名已被占用')
                        $('#ri').attr('hidden','hidden');
                        $('#le').removeAttr('hidden');
                    }
                }
            })
        });
        //添加表单监听事件
        form.on('submit(sub)',function () {
            if ($('#le').attr('hidden') === 'hidden'){
                $.ajax({
                    url:'/register',
                    type:'post',
                    data:{managerName:$('#managerName').val(),
                        managerPassword:$('#managerPassword').val()},
                    dataType:'JSON',
                    //判断注册状态
                    success:function (res) {
                        if(res.code === 0){
                            layer.msg('注册成功', {icon: 1, time: 1000}, function(){
                                location.href='/login';
                            });
                        }
                    }
                })
            } else {
                layer.msg('用户名已存在', function (){
                    location.reload();
                });
            }
            //防止页面跳转
            return false;
        });
    });
</script>
</body>
</html>